<template>
  <div id="app">
    我是父组件 , 我要引入我儿子 ,注册我儿组件 , 使用子组件

    <!-- 谁给你信号,就在谁身上监听 -->
    <!-- 2. @xxxx 接收到这个信号                函数    -->
    <Son :title="myTitle" @changeTitle="handlerChange"/>

  </div>
</template>

<script>

import Son from './components/MySon.vue'

// 组件通信
// 1. 父子关系 通信   props 和 $emit
// 父 传值给 儿 :2 步    1. :属性名="值" (传值)      props:["属性名"] (接收,就可直接用了 {{xxx}})  
// 子 传值给 父 :3 步    1. 通过this.$emit("xx","内容") 发信号(值) 2.@xx 触发函数,参数就是儿子传过来的值 3.拿着值做事情 


// 儿子通过 props来接收值 , 父亲通过 $emit 发送值
// 2. 非父子关系 通信

export default {
  data(){
    return {
      myTitle:"你有这么先进的技术进入中国，我给你一个offer"
    }
  },
  components:{
    Son
  },
  methods:{
    handlerChange(newTitle){
      // 3. 收到了儿子的值 , 来修改标题内容了
      this.myTitle =  newTitle
    }
  }

}
</script>

<!-- 

props  data

相同点:都可以给组件提供数据 , {{ xxx }}使用

不同点:
props  这里得到的数据, 是外部的   [不能直接修改]  【单向数据流】
data   是自己的数据 , 这些数据 也可以作为变量 传给父组件  [随便改]




-->

<style>

</style>
